<template>
  <div>
    <div
      class="relative box-border h-25vh flex justify-center b-rounded-b-10 bg-#2f8df8 pt-10 font-size-20px c-white"
    >
      管理平台
      <div
        class="absolute bottom-0 box-border h-110px w-94vw flex translate-y-30% items-center b-2 b-rd-2 b-style-solid bg-gradient-from-#2A8CF8 bg-gradient-to-#c2defd bg-gradient-linear bg-gradient-to-r p-15px"
      >
        <var-avatar bordered round size="80" src="https://picsum.photos/200"/>
        <div class="h-90% flex flex-1 flex-col justify-between px-15px">
          <div class="flex font-size-14px">账号</div>
          <div class="flex font-size-14px">地址</div>
        </div>
        <var-button text type="primary">切换账号</var-button>
      </div>
    </div>
    <div class="grid grid-cols-2 mt-53px gap-20px p-7.5px">
      <div v-for="(item, index) in apps" :key="index">
        <HomeCard v-bind="item"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import HomeCard from "./component/home-card/index.vue"
import appRoutes from "@/router/modules/app"
import { useAssetsImagesPath } from "@/hooks/useAssetsImagesPath"

const images = useAssetsImagesPath()

const apps = appRoutes.map(v => {
  return {
    title: v.meta!.title + "",
    color: v.meta!.color + "",
    icon: images.get(v.name) + "",
    path: v.path
  }
})
</script>

<style></style>
